<template>
	<el-form ref="form" :model="formData" :rules="formRules" class="fornt_form_container">
		<el-form-item label="课题名称" prop="name">
			<el-input v-model="formData.name" placeholder="请输入课题名称"></el-input>
		</el-form-item>
		<el-form-item label="课题类型" prop="type">
			<el-radio-group v-model="formData.type" v-removeAriaHidden>
				<el-radio v-for="(item, index) in topicTypeData" :key="index" :label="item.value">{{ item.msg }}</el-radio>
			</el-radio-group>
		</el-form-item>
		<el-form-item label="研究领域" prop="sector" required>
			<el-radio-group v-model="formData.sector" v-removeAriaHidden>
				<el-radio v-for="(item, index) in researchAreaData" :key="index" :label="item.name">{{ item.name }}</el-radio>
				<el-radio label="0">
					<span style="margin-right: 10px">其他</span>
					<el-input size="small" v-if="formData.sector === '0'" v-model="otherSector" placeholder="输入研究领域"></el-input>
				</el-radio>
			</el-radio-group>
		</el-form-item>
		<el-form-item label="二级领域" prop="filed4" v-if="twoResearchArea.length > 0">
			<el-radio-group v-model="formData.filed4" v-removeAriaHidden>
				<el-radio v-for="(item, index) in twoResearchArea" :key="index" :label="item.name">{{ item.name }}</el-radio>
			</el-radio-group>
		</el-form-item>
		<el-form-item label="测量技术" prop="measureList">
			<el-checkbox-group v-model="formData.measureList" v-removeAriaHidden>
				<el-checkbox v-for="(item, index) in measureListData" :key="index" :label="item.name">{{ item.name }}</el-checkbox>
			</el-checkbox-group>
		</el-form-item>
		<el-form-item label="强磁场PI" prop="piList">
			<person-select v-model="formData.piList" :data="principalData" placeholder="请选择强磁场PI" multiple></person-select>
		</el-form-item>
		<el-form-item label="申请人">
			<div class="plaintext">{{ userInfo.username }}</div>
		</el-form-item>
		<el-form-item class="entire" prop="collaList">
			<template slot="label">
				合作者
				<el-tooltip effect="dark" content="有强磁场经验或相关学科带头人合作者可增大课题通过的概率" placement="top">
					<i class="el-icon-warning"></i>
				</el-tooltip>
			</template>
			<table-form ref="collaRef" v-model="formData.collaList" :columns="participantColumns"></table-form>
		</el-form-item>
		<el-form-item class="entire" prop="fundsList">
			<template slot="label">相关经费信息</template>
			<table-form ref="fundRef" v-model="formData.fundsList" :columns="expenditureColumns"></table-form>
		</el-form-item>
		<el-form-item class="entire file" prop="fileJson">
			<template slot="label">
				课题申请文件上传
				<el-button type="text" class="download" @click="handleDownloadTemp(1)">下载课题模板文件</el-button>
			</template>
			<file-uploader type="4" v-model="formData.fileJson"></file-uploader>
		</el-form-item>
		<el-form-item>
			<el-button class="submit" size="medium" type="warning" @click="handleSubmitData()">提交</el-button>
			<el-button class="save" size="medium" type="primary" plain @click="handleSaveData()">保存</el-button>
			<el-button class="reset" size="medium" @click="handleResetForm()">重置</el-button>
		</el-form-item>
	</el-form>
</template>

<script>
import lodash from 'lodash';
import tableForm from '../common/tableForm';
import personSelect from '../common/person';
import formMixins from '../common/formMixins';
import fileUploader from '../common/fileUploader';
import { topicDetail, addedTopic, updateTopic } from '@/api/business/tbTopic';
export default {
	mixins: [formMixins],
	components: { tableForm, personSelect, fileUploader },
	data() {
		const sectorValidator = (rule, value, callback) => {
			if (!value) {
				callback(new Error('请选择研究领域'));
			} else if (value === '0' && !this.otherSector) {
				callback(new Error('请输入研究领域'));
			} else {
				callback();
			}
		};
		return {
			otherSector: '',
			formData: { piList: [], collaList: [], fundsList: [], measureList: [] },
			formRules: {
				name: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
				type: [{ required: true, message: '请选择课题类型', trigger: 'change' }],
				sector: [{ validator: sectorValidator, trigger: ['change', 'blur'] }],
				filed4: [{ required: true, message: '请选择二级领域', trigger: 'change' }],
				piList: [{ required: true, message: '请选择强磁场PI', trigger: 'change' }],
				collaList: [{ required: true, message: '请添加合作者', trigger: 'change' }],
				fundsList: [{ required: true, message: '请添加费用信息', trigger: 'change' }],
				measureList: [{ required: true, message: '请选择测量技术', trigger: 'change' }],
				fileJson: [{ required: true, message: '请上传课题申请文件', trigger: 'change' }]
			}
		};
	},
	computed: {
		detailFunction() {
			return eval(topicDetail);
		},
		callFunction() {
			return eval(this.addOrEdit ? addedTopic : 'updateTopic');
		},
		topicTypeData() {
			return this.dictEnums['PROJECT_TYPE'] || [];
		},
		measureListData() {
			return lodash.filter(this.siteConfig, { type: '2' });
		},
		researchAreas() {
			return lodash.filter(this.siteConfig, { type: '1' });
		},
		researchAreaData() {
			return this.$flatToTree(this.researchAreas, 'pid');
		},
		twoResearchArea() {
			let name = this.formData.sector;
			let datas = lodash.find(this.researchAreas, { name });
			return lodash.filter(this.researchAreas, { pid: datas?.id });
		},
		participantColumns() {
			let participateWay = this.dictEnums['PARTICIPATE_WAY'] || [];
			let selectOptions = participateWay.map((n) => ({ label: n.msg, value: n.value }));
			let validSelect = { mode: 'select', options: selectOptions, isValid: true };
			return [
				{ label: '参与方式', prop: 'modeType', ...validSelect },
				{ label: '姓名', prop: 'name', mode: 'input' },
				{ label: '单位', prop: 'dept', mode: 'input' },
				{ label: '职称', prop: 'position', mode: 'input' },
				{ label: '角色', prop: 'role', mode: 'input' }
			];
		},
		expenditureColumns() {
			let fundTyps = this.dictEnums['FUND_TYPE'] || [];
			let selectOptions = fundTyps.map((n) => ({ label: n.msg, value: n.value }));
			let validSelect = { mode: 'select', options: selectOptions, isValid: true };
			return [
				{ label: '经费类型', prop: 'type', ...validSelect },
				{ label: '标题', prop: 'name', mode: 'input' },
				{ label: '费用号', prop: 'fno', mode: 'input' },
				{ label: '总额度', prop: 'quota', mode: 'money' }
			];
		}
	},
	mounted() {},
	methods: {
		//格式化数据
		formatFormParams() {
			let params = { ...this.formData };
			params['piList'] = params.piList.map((n) => n.piId);
			return params;
		},

		//保存表单
		handleSaveData() {
			this.$refs['form'].validateField('name', (error) => {
				if (!!error) return false;
				this.submitFormRequest(2);
			});
		},

		//提交表单
		handleSubmitData() {
			this.$refs['form'].validate(async (valid) => {
				let fundValid = await this.$refs['fundRef'].validChildForm();
				let collaValid = await this.$refs['collaRef'].validChildForm();
				if (!valid) return false;
				console.log();
				this.submitFormRequest(1);
			});
		},

		//提交表单请求
		async submitFormRequest(isSave) {
			let params = this.formatFormData(isSave);
			let result = await callFunction(params).then((res) => res.data);
			console.log(result);
		},

		handleResetForm() {
			this.initFormData();
		}
	}
};
</script>

<style lang="scss" scoped>
@use '../common/formStyle.scss';
</style>
